<template>
  <div class="personnelInformation">
    <p style="text-align: left; width: 100%;margin-bottom: 30px;font-size: 20px;">人员信息</p>
    <el-table :data="list" style="width: 100%" class="table" height='100%' header-row-class-name="table-header">
      <el-table-column prop="name" label="姓名" width="300">
        <template #default="{ row }">
          <div style="display: flex;align-items: center;">
            <img :src="row.profilePicUrl" alt="" style="width: 32px; height: 32px; border-radius: 50%; margin-right: 10px ;" />
            <span>{{ row.name }}</span>

          </div>
        </template>
      </el-table-column>
      <el-table-column prop="emailAddr" label="邮箱" />
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button class="edit" link size="small" @click="eidtOpen(row)">
            <SvgIcon name="编辑-笔" :size="25" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="pagination-info">
        <span>第{{ pagination.currentPage }}页，</span>
        <span>共{{ pagination.totalPage }}页，</span>
        <span>共{{ pagination.total }}条数据</span>
      </div>
      <div>
        <span style="color:#333;font-size: 13px;margin-right: 5px;">显示</span>
        <el-input-number v-model="pagination.pageSize" :min="1" :max="50" style="width: 80px;" controls-position="right"
          @change="handleChange" />
      </div>
      <el-pagination background layout="prev, pager, next" :total="pagination.total" @change = "changePage"
        v-model:page-size="pagination.pageSize" v-model:current-page="pagination.currentPage"
        style="margin-left:15px;" />
    </div>

    <el-dialog align-center v-model="editDialog" width="450" :before-close="handleClose">
      <p style="width: 100%;text-align: center;font-size: 18px;margin-bottom: 20px;">人员信息</p>
      <div style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
        <img :src="editForm.profilePicUrl" alt="" style="width: 68px;height: 68px;border-radius: 50%;margin-bottom: 10px;box-shadow: 0 0 0 2px #4861FF;padding: 5px;">
        <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :http-request="handleUpload"
        >
          <el-button type="primary" round plain style="margin-bottom: 20px;">更改头像</el-button>
        </el-upload>

      </div>
      <el-form label-position="top" :rules="rules" :model="editForm" label-width="auto"
        style="width: 100%;padding: 0 40px;" ref="formRef">
        <el-form-item label="姓名"  prop="name">
          <el-input v-model="editForm.name" clearable />
        </el-form-item>
        <el-form-item label="邮箱" class="input-item" prop="emailAddr">
          <el-input v-model="editForm.emailAddr" clearable />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked1" label="修改本次会议记录中全部此发言人的信息" size="large" />

        </el-form-item>
        <el-form-item>
          <div style="width: 100%; display: flex;justify-content: space-between;margin-top: 30px;">
            <el-button size="large" style="width: 40%;" round @click ="editDialog = false">取消</el-button>
            <el-button size="large" style="width: 40%; " type="primary" round @click="handleSubmit">确定</el-button>

          </div>

        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import {listUser, updateUserById, upload} from "@/api/index.js";
import { ElMessage } from 'element-plus'

const formRef = ref(null);
onMounted(async ()=>{
  const data = await listUser(
      {
        page:pagination.value.currentPage,
        pageSize:pagination.value.pageSize
        })
  if(data.code === 200){
    list.value = data.data.list;
    pagination.value.total = data.data.total;
    pagination.value.currentPage = data.data.pageNum;
    pagination.value.totalPage = data.data.pages;
  }
})

const validateUsername = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入姓名'));
  } else {
    callback();
  }
};

const validateEmail = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('邮箱格式错误'));
  } else {
    if (value !== '') {
      var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if(!reg.test(value)){
        callback(new Error('邮箱格式错误'));
      }
    }
    callback();
  }
};
const list = ref()
const editDialog = ref(false)
const pagination = ref({
  total: 0,
  totalPage: 1,
  pageSize: 10,
  currentPage: 1,
})
const editForm = ref({
  profilePicUrl: '',
  name: '',
  emailAddr: '',
  id:''
})
const checked1 = ref(true)
const rules = ref({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur',validator: validateUsername },
  ],
  emailAddr: [
    { required: true, trigger: 'blur',validator: validateEmail  },
  ],
})
const eidtOpen = (row) => {
  editForm.value = row
  if (formRef.value) {
    formRef.value.resetFields();
  }
  editDialog.value = true
}
const handleSubmit = async () =>{
  formRef.value.validate(async (valid) => {
    if (valid) {
      const data = await updateUserById(editForm.value);
      if(data.code === 200){
        ElMessage.success("修改成功")
      }else{
        ElMessage.error("修改失败")
      }
      editDialog.value = false
      // 处理提交逻辑
    } else {
      return false;
    }
  });

}
const handleChange = async () =>{
  const data = await listUser(
      {
        page:pagination.value.currentPage,
        pageSize:pagination.value.pageSize
      })
  if(data.code === 200){
    list.value = data.data.list;
    pagination.value.total = data.data.total;
    pagination.value.currentPage = data.data.pageNum;
    pagination.value.totalPage = data.data.pages;
  }
}

const changePage = async () =>{
  const data = await listUser(
      {
        page:pagination.value.currentPage,
        pageSize:pagination.value.pageSize
      })
  if(data.code === 200){
    list.value = data.data.list;
    pagination.value.total = data.data.total;
    pagination.value.currentPage = data.data.pageNum;
    pagination.value.totalPage = data.data.pages;
  }
}
const handleClose = () => {
  editDialog.value = false
  editForm.value = {}
}

const handleUpload = async (e) => {
  const formData = new FormData();
  const reader = new FileReader();
  reader.readAsArrayBuffer(e.file); // 读取文件为 ArrayBuffer
  reader.onload = async (loadEvent) => {
    const arrayBuffer = loadEvent.target.result;
    let file = new File([arrayBuffer],  e.file.name);
    formData.append('file', file);
    const data = await upload(formData)
    if(data.code === 200) {
      editForm.value.profilePicUrl = data.data.url
      ElMessage.success("上传成功")
    }
  }
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('文件格式不正确!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('超出图片大小!')
    return false
  }
  return true
}

</script>

<style lang="scss" scoped>
.personnelInformation {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  padding: 80px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  flex-direction: column;
  background: linear-gradient(270deg, #F7F9FD 0%, rgba(247, 249, 253, 0.00) 83.37%, rgba(247, 249, 253, 0.00) 100%), linear-gradient(180deg, #EDF0FF 0%, #FFF 15.24%);

  .table {
    border: 1px solid #ebeef5;
    border-radius: 10px;
  }

  :deep(.table-header) {

    .el-table__cell {
      background-color: #f3f5f9 !important;

      .cell {
        color: #4a4a4a;
      }
    }
  }

  :deep(.cell) {
    padding: 10px !important;
  }

  .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 20px;

    :deep(.el-pagination) {
      button {
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid #e9e9e9;
      }

      .is-active {
        background-color: var(--el-color-primary) !important;
      }

      li {
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid #e9e9e9;
        font-size: 11px;




      }
    }

    .pagination-info {
      color: #666;
      font-size: 13px;
      margin-right: auto;
    }
  }

  :deep(.el-dialog) {
    background: linear-gradient(180deg, #DFE5FF 0%, #FFF 40%);
    box-shadow: 0px 8px 30px 0px rgba(113, 122, 163, 0.30);
    border-radius: 12px;
  }
  .edit:hover {
    color: #1890ff; /* 鼠标悬停时的文本颜色 */
    text-decoration: underline; /* 鼠标悬停时添加下划线 */
  }
}
</style>
